<template>
	<view class="box">
		<page-head :transparent='false'><slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot></page-head>
		<view>
			<view class="img"><img class="img_b" :src="banner703" />{{}}</view>
			<!-- <view class="setInterval">
				<view class="set_box"><count-down :time="timestamp" @end="countDownEnd" :now="now"></count-down></view>
			</view> -->
			<view class="img_link">
				<view class="img_box1">
					<img class="img_x" :src="nav1" />
				</view>
				<view class="img_box1" v-for="(data, index1) in imgUrl2" :key="index1">
					<img class="img_x" :src="data.img" @click="linkTo(data.imgurl)" />
				</view>
				<view class="img_box1">
					<img class="img_x" :src="nav2" />
				</view>
				<view class="img_box" v-for="(data, index2) in imgUrl" :key="index2 + '10'">
					<img class="img_x" :src="data.img" @click="linkTo(data.imgurl)" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import CountDown from '../../../components/countdown.vue';

import banner703 from '../../../static/img/miaosha/banner703.png'
import nav1 from '../../../static/img/miaosha/nav1.png'
import nav2 from '../../../static/img/miaosha/nav2.png'
import bf1 from '../../../static/img/miaosha/bf1.png'
import bf2 from '../../../static/img/miaosha/bf2.png'
import bf3 from '../../../static/img/miaosha/bf3.png'
import bfxr1 from '../../../static/img/miaosha/bfxr1.png'
import bfxr2 from '../../../static/img/miaosha/bfxr2.png'
import bfxr3 from '../../../static/img/miaosha/bfxr3.png'
import bfxr4 from '../../../static/img/miaosha/bfxr4.png'
import bfxr5 from '../../../static/img/miaosha/bfxr5.png'
import bfxr6 from '../../../static/img/miaosha/bfxr6.png'
import bfxr7 from '../../../static/img/miaosha/bfxr7.png'
import bfxr8 from '../../../static/img/miaosha/bfxr8.png'

export default {
	data() {
		return {
			timestamp: 0,
			imgUrl: [],
			imgUrl2: [],
			banner703: banner703,
			nav1: nav1,
			nav2: nav1,
			imgList2: [
				bfxr1,
				bfxr2,
				bfxr3,
				bfxr4,
				bfxr5,
				bfxr6,
				bfxr7,
				bfxr8
			],
			imgList: [bf1, bf2, bf3],
			url: [
				'../../selfdetail/selfdetail?skuId=3587&cid=92&title=珀莱雅闺蜜补水保湿面膜30片 晒后修复收缩毛孔深层清洁护肤品 化妆品套装滋润水嫩亮肤男女通用&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3588&cid=278&title=梦妆 （Mamonde）蔷薇柔光无瑕气垫霜 21（自然色）14g&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3589&cid=279&title=美宝莲（MAYBELLINE）super stay巨持色哑光液体唇膏 80气场 梅子豆沙色 接吻棒（口红 持久不掉色 ）&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3577&cid=298&title=德国（Hape）儿童玩具 沙漏铲子玩沙桶沙滩模型9件套suit0079  18个月+ 玩雪挖沙玩沙男女孩&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3581&cid=240&title=飞利浦（PHILIPS）自拍杆 铝合金拉杆 短视频/直播/自拍神器 DLK36001 适用于安卓/苹果通用 黑色（蓝牙版）&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3584&cid=674&title=【PD快充】倍思 充电宝10000毫安 超薄便携小巧迷你移动电源 安卓type-c苹果可上飞机 大容量PD双向快充 黑色&seller=京东自营',
				'../../selfdetail/selfdetail?skuId=3590&cid=536&title=天堂伞 （UPF50+）自开自收黑胶转印三折太阳伞晴雨伞31815E紫色&seller=好品购',
				'../../selfdetail/selfdetail?skuId=3582&cid=571&title=洁丽雅兰毛巾家纺浴巾泰迪珍藏海军风加厚吸水浴巾140*70 435g深蓝色&seller=京东自营'
			],
			url2: [
				'../../selfdetail/selfdetail?skuId=3574&cid=276&title=确美同（Coppertone）水宝宝透薄清新防晒喷雾 177ml SPF50 PA+++&seller=京东自营',
				'../../selfdetail/selfdetail?skuId=3580&cid=395&title=THERMOS膳魔师男女便携运动Tritan塑料水杯710ML蛋*屏蔽的关键字*奶昔摇摇杯 TP4086 GY浅灰色&seller=京东自营',
				'../../selfdetail/selfdetail?skuId=3586&cid=420&title=海俪恩墨镜 时尚大框太阳镜女款 唐嫣街拍同款眼镜 N6621粉色框+玫瑰粉膜N17&seller=好品购'
			],
			title: '限时秒杀'
		};
	},
	onLoad(event) {
		genCommonData();
		this.ti = '限时秒杀';
		this.time();
		if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token !=
		    'undefined') {
		    uni.setStorageSync('token', decodeURI(event.token));
		}
	},
	methods: {
		linkTo(url) {
			if (url != '') {
				h5NavigateTo({
					url:url
				})
				// uni.navigateTo({
				// 	// url: decodeURI(url)
				// 	url:url
				// });
			}
		},
		now() {
			return Date.now();
		},
		countDownEnd() {
			console.log('倒计时结束');
			uni.showModal({
				title: '',
				content: '秒杀结束',
				showCancel: false
			});
			this.imgUrl = [];
			this.url = [];
			this.time();
		},
		time() {
			// let obj = {
			// 	lastTime: new Date('2019/6/28 09:59:59').getTime(),
			// 	nowTime: new Date().getTime()
			// };
			// this.timestamp = obj.lastTime - obj.nowTime;
			this.dataTime();
		},
		dataTime() {			
			this.getImgDate();
		},
		getImgDate() {
			const that = this
			that.url.map((item, index) => {
				that.imgUrl.push({
					img: that.imgList2[index] ,
					imgurl: item
				});
			});
			that.url2.map((item, index) => {
				that.imgUrl2.push({
					img: that.imgList[index],
					imgurl: item
				});
			});
		}
	},
	components: {
		// CountDown
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	background: #f3d889;
	margin: 0;
	padding: 0;
	font-size: 0;
	.img {
		width: 100%;
		.img_b {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0;
		}
	}

	.setInterval {
		width: 100%;
		height: 104px;
		color: #fff;
		font-size: 15px;
		/* line-height: 1.8; */
		text-align: center;
		// height: 146px;

		.set_box {
			width: 100%;
			height: 100%;
			/* margin: 48px auto; */
			/* width: 380px;
			height: 120px; */
			/* border: 6px solid #fff;
			border-radius: 10px; */
		}
	}

	.img_link {
		margin-top: 15px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #f3d889;
		.img_logo {
			width: 100%;
			// margin: 0 auto;

			.img_x {
				width: 100%;
			}
		}
		.img_box1 {
			width: 100%;

			.img_x {
				width: 100%;
			}
		}

		.img_box {
			width: 50%;
			.img_x {
				width: 100%;
			}
		}
	}
}
</style>
